<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络爬虫管理平台</title>

    <link rel="stylesheet" type="text/css" href="login/css/styles.css">
    <style type="text/css">
        body, td, th {
            font-family: "Source Sans Pro", sans-serif;
        }

        body {
            background-color: #2B2B2B;
        }
    </style>
</head>
<body>


<div class="wrapper">

    <div class="container">
        <h1 id="index_title">网络爬虫管理平台</h1>
        <form class="form">
            <input type="text" id="phone" placeholder="Username">
            <input type="password" id="password" placeholder="Password">
            <input type="password" id="password_again" class="register_class" style="display:none;"
                   placeholder="Password Again">
            <button type="button" id="login-button">Login</button>
            <br>
            <button type="button" id="login-register">Register</button>
        </form>
    </div>

    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

<script type="text/javascript" src="login/js/jquery-2.1.1.min.js"></script>
<link href="js/toastr/toastr.min.css" rel="stylesheet">
<script src="js/toastr/toastr.min.js"></script>
<script type="text/javascript" src="my/mycommon.js"></script>

<script type="text/javascript">
    function getUsers() {
        var users = {};
        users.userPhone = $("#phone").val();
        users.userPassword = $("#password").val();
        return users;
    }

    $('#login-register').click(function (event) {
        var index_title = $("#index_title").text();
        if (index_title && index_title == "网络爬虫管理平台") {
            $(".register_class").css("display", "block");
            $("#index_title").text("注册");
            $("#phone").val("");
            $("#password").val("");
            $("#password_again").val("");
        } else {
            if($("#password").val()!= $("#password_again").val()){
                toastr.error('密码 和 确认密码不相等！！');
                return;
            }
            var users = getUsers();
            myAjax("/users/register",users, function (result) {
                toastr.success(result.message);
                $('#login-button').click();
                $("#phone").val(users.userPhone);
                $("#password").val("");
            });
        }

    });
    $('#login-button').click(function (event) {


        var index_title = $("#index_title").text();
        if (index_title && index_title == "注册") {
            $(".register_class").css("display", "none");
            $("#index_title").text("网络爬虫管理平台");
            $("#password").val("");
        } else {
            myAjax("/users/login", getUsers(), function (result) {
                toastr.success(result.message);
                $('.wrapper').addClass('form-success');
                event.preventDefault();
                sessionStorage.setItem('userToken', "Users_" + result.data.userPhone);
                sessionStorage.setItem('userInfo', JSON.stringify(result.data));
                $('form').fadeOut(1500);
                //refreshUseInfo();
                location.href = urlPre + "/index.html";

            });
        }

    });
</script>

</body>
</html>